<template>
  <div style="width: 60%; min-height: 600px; margin: 20px auto">
    <div style="width: 50%; margin: 20px auto; padding: 20px" class="card">
      <div style="font-size: 24px; font-weight: bold; text-align: center">我的中转站</div>
      <div style="margin: 20px; font-size: 16px">
        <div style="padding-bottom: 20px; text-align: center">
          <el-tag type="success" v-if="data.transferStationInfo?.maxSize - data.transferStationInfo?.currentSize >= 100">正常</el-tag>
          <el-tag type="danger" v-else>即将用完</el-tag>
        </div>
        <div style="padding-bottom: 10px"><span style="color: #666666">中转站名称（系统自动生成）：</span>{{data.transferStationInfo.name}}</div>
        <div style="padding-bottom: 10px"><span style="color: #666666">当前占用存储大小：</span>{{data.transferStationInfo.currentSize}} MB</div>
        <div style="padding-bottom: 10px"><span style="color: #666666">最大存储大小：</span>{{data.transferStationInfo.maxSize}} MB</div>

      </div>

    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue"
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_BASE_URL
const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  tableData: [],
  total: 0,
  pageNum: 1,  // 当前的页码
  pageSize: 5,  // 每页的个数
  formVisible: false,
  form: {},
  ids: [],
  name: null,
  userList: [],
  transferStationInfo: {}
})

// 加载表格数据
const load = () => {
  request.get('/transferStation/selectAndUserId/' + data.user.id, ).then(res => {
    if (res.code === '200') {
      data.transferStationInfo = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}

load()

</script>